<!doctype html><html class="theme-next pisces use-motion"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic|Monda:300,300italic,400,400italic,700,700italic|Monda:300,300italic,400,400italic,700,700italic|console:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"><link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css"><meta name="keywords" content="npm,nodejs,javascript,hexo,gulp,cnpm,css,html,"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1"><meta name="description" content="&amp;#x535A;&amp;#x5BA2;&amp;#x52A0;&amp;#x8F7D;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x56FE;&amp;#x7247;&amp;#x5237;&amp;#x65B0;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x522B;&amp;#x6025;&amp;#xFF0C;&amp;#x5C3D;&amp;#x7BA1;&amp;#x4F60;&amp;#x7684;&amp;#x535A;&amp;#x5BA2;&amp;#x5DF2;&amp;#x7ECF;"><meta property="og:type" content="article"><meta property="og:title" content="利用Gulp优化Hexo博客"><meta property="og:url" content="http://yoursite.com/2016/06/19/利用Gulp优化Hexo博客/index.html"><meta property="og:site_name" content="ziyi2"><meta property="og:description" content="&amp;#x535A;&amp;#x5BA2;&amp;#x52A0;&amp;#x8F7D;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x56FE;&amp;#x7247;&amp;#x5237;&amp;#x65B0;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x522B;&amp;#x6025;&amp;#xFF0C;&amp;#x5C3D;&amp;#x7BA1;&amp;#x4F60;&amp;#x7684;&amp;#x535A;&amp;#x5BA2;&amp;#x5DF2;&amp;#x7ECF;"><meta property="og:updated_time" content="2016-06-19T11:39:56.000Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="利用Gulp优化Hexo博客"><meta name="twitter:description" content="&amp;#x535A;&amp;#x5BA2;&amp;#x52A0;&amp;#x8F7D;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x56FE;&amp;#x7247;&amp;#x5237;&amp;#x65B0;&amp;#x7F13;&amp;#x6162;&amp;#xFF1F;&amp;#x522B;&amp;#x6025;&amp;#xFF0C;&amp;#x5C3D;&amp;#x7BA1;&amp;#x4F60;&amp;#x7684;&amp;#x535A;&amp;#x5BA2;&amp;#x5DF2;&amp;#x7ECF;"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Pisces",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!0,duoshuo:{userId:629674706219303e4,author:"博主小萌萌"}}</script><link rel="canonical" href="http://yoursite.com/2016/06/19/利用Gulp优化Hexo博客/"><title> 利用Gulp优化Hexo博客 | ziyi2</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><script type="text/javascript">var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="//hm.baidu.com/hm.js?0cb30035061d41c6cdeb72de4924d544";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">ziyi2</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">人生一世，草木一秋。</p></div><div class="site-nav-toggle"> <button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br> 首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br> 分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br> 关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br> 归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br> 标签</a></li><li class="menu-item menu-item-search"><a href="#" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br> 搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div> <span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"> 利用Gulp优化Hexo博客</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2016-06-19T10:27:16+08:00" content="2016-06-19">2016-06-19</time></span> <span class="post-category">&nbsp; | &nbsp;<span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/技术/" itemprop="url" rel="index"><span itemprop="name">技术</span></a></span> ， <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/技术/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span> ， <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/技术/前端/优化/" itemprop="url" rel="index"><span itemprop="name">优化</span></a></span></span> <span class="post-comments-count">&nbsp; | &nbsp;<a href="/2016/06/19/利用Gulp优化Hexo博客/#comments" itemprop="discussionUrl"><span class="post-comments-count ds-thread-count" data-thread-key="2016/06/19/利用Gulp优化Hexo博客/" itemprop="commentsCount"></span></a></span></div></header><div class="post-body" itemprop="articleBody"><p>&#x535A;&#x5BA2;&#x52A0;&#x8F7D;&#x7F13;&#x6162;&#xFF1F;&#x56FE;&#x7247;&#x5237;&#x65B0;&#x7F13;&#x6162;&#xFF1F;&#x522B;&#x6025;&#xFF0C;&#x5C3D;&#x7BA1;&#x4F60;&#x7684;&#x535A;&#x5BA2;&#x5DF2;&#x7ECF;&#x5EFA;&#x7ACB;&#x5B8C;&#x6210;&#xFF0C;&#x4F46;&#x662F;&#x5BF9;&#x4E8E;&#x5927;&#x5BB6;&#x6765;&#x8BF4;&#x4F53;&#x9A8C;&#x8FD8;&#x4E0D;&#x4E00;&#x5B9A;&#x5F88;&#x597D;&#xFF0C;&#x8FD8;&#x6709;&#x5F88;&#x591A;&#x4F18;&#x5316;&#x5DE5;&#x4F5C;&#x53EF;&#x4EE5;&#x505A;&#x3002;&#x672C;&#x6587;&#x662F;&#x9488;&#x5BF9;&#x535A;&#x5BA2;&#x4F18;&#x5316;&#x7684;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x5C0F;&#x90E8;&#x5206;&#xFF0C;&#x5373;&#x538B;&#x7F29;&#x535A;&#x5BA2;&#x4E2D;&#x7684;HTML&#x3001;CSS&#x3001;JS&#x548C;&#x56FE;&#x50CF;&#x6587;&#x4EF6;&#x3002;&#x672C;&#x6587;&#x4F7F;&#x7528;<strong>Gulp</strong>&#x81EA;&#x52A8;&#x5316;&#x5DE5;&#x5177;&#xFF0C;&#x5BF9;&#x5176;&#x5B89;&#x88C5;&#x548C;&#x4F7F;&#x7528;&#x505A;&#x4E86;&#x7B80;&#x8981;&#x8BF4;&#x660E;&#xFF0C;&#x63A5;&#x4E0B;&#x6765;&#x662F;&#x5229;&#x7528;<strong>Gulp</strong>&#x5DE5;&#x5177;&#x5BF9;<strong>Hexo</strong>&#x535A;&#x5BA2;&#x8FDB;&#x884C;&#x90E8;&#x5206;&#x4F18;&#x5316;&#x5904;&#x7406;&#x2026;&#x2026;</p><a id="more"></a><h2 id="&#x5B89;&#x88C5;Gulp"><a href="#&#x5B89;&#x88C5;Gulp" class="headerlink" title="&#x5B89;&#x88C5;Gulp"></a>&#x5B89;&#x88C5;Gulp</h2><hr><h3 id="&#x5168;&#x5C40;&#x5B89;&#x88C5;"><a href="#&#x5168;&#x5C40;&#x5B89;&#x88C5;" class="headerlink" title="&#x5168;&#x5C40;&#x5B89;&#x88C5;"></a>&#x5168;&#x5C40;&#x5B89;&#x88C5;</h3><p>&#x4F7F;&#x7528;<strong>npm</strong>&#x5168;&#x5C40;&#x5B89;&#x88C5;<strong>Gulp</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install --g gulp</span><br></pre></td></tr></table></figure><p></p><p>&#x5F53;&#x7136;&#xFF0C;&#x5982;&#x679C;<strong>npm</strong>&#x5B89;&#x88C5;&#x6BD4;&#x8F83;&#x6162;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x56FD;&#x5185;&#x6DD8;&#x5B9D;&#x7684;<strong>npm</strong>&#x955C;&#x50CF;<strong>cnpm</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure><p></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cnpm install --g gulp</span><br></pre></td></tr></table></figure><h3 id="&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;"><a href="#&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;" class="headerlink" title="&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;"></a>&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;</h3><p>&#x8FDB;&#x5165;<strong>&#x9879;&#x76EE;&#x76EE;&#x5F55;</strong>&#xFF0C;&#x4F8B;&#x5982;&#x5728;&#x684C;&#x9762;&#x65B0;&#x5EFA;<code>testGulp</code>&#x76EE;&#x5F55;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ cd ~/Desktop/</span><br><span class="line">$ mkdir testGulp</span><br><span class="line">$ cd testGulp</span><br></pre></td></tr></table></figure><p></p><p>&#x521B;&#x5EFA;&#x4E00;&#x4E2A;<strong>npm</strong>&#x4F9D;&#x8D56;&#x5305;<code>package.json</code><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cnpm init</span><br></pre></td></tr></table></figure><p></p><p>&#x5B89;&#x88C5;&#x672C;&#x5730;<strong>Gulp</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cnpm install gulp --save</span><br></pre></td></tr></table></figure><p></p><p>&#x5B89;&#x88C5;&#x5B8C;&#x6210;&#x540E;&#xFF0C;&#x53EF;&#x4EE5;&#x67E5;&#x770B;<strong>Gulp</strong>&#x7684;&#x7248;&#x672C;&#x53F7;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ gulp -v</span><br><span class="line">[20:46:37] CLI version 3.9.1</span><br><span class="line">[20:46:37] Local version 3.9.1</span><br></pre></td></tr></table></figure><p></p><p>&#x521B;&#x5EFA;<strong>Gulp</strong>&#x6587;&#x4EF6;<code>gulpfile.js</code><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vim gulpfile.js</span><br></pre></td></tr></table></figure><p></p><p>&#x5199;&#x5165;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require(&apos;gulp&apos;);		//&#x5F15;&#x5165;gulp&#x6A21;&#x5757;</span><br><span class="line">gulp.task(&apos;default&apos;, function() {</span><br><span class="line">  // &#x5C06;&#x4F60;&#x7684;&#x9ED8;&#x8BA4;&#x7684;&#x4EFB;&#x52A1;&#x4EE3;&#x7801;&#x653E;&#x5728;&#x8FD9;</span><br><span class="line">  console.log(&apos;gulp run ok&apos;);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p></p><p>&#x8FD0;&#x884C;gulp<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ gulp</span><br></pre></td></tr></table></figure><p></p><p>&#x663E;&#x793A;&#x5982;&#x4E0B;&#x8868;&#x660E;&#x8FD0;&#x884C;&#x6210;&#x529F;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[21:10:34] Using gulpfile ~/Desktop/testGulp/gulpfile.js</span><br><span class="line">[21:10:34] Starting &apos;default&apos;...</span><br><span class="line">gulp run ok</span><br><span class="line">[21:10:34] Finished &apos;default&apos; after 199 &#x3BC;s</span><br></pre></td></tr></table></figure><p></p><h2 id="Gulp-API&#x548C;&#x63D2;&#x4EF6;"><a href="#Gulp-API&#x548C;&#x63D2;&#x4EF6;" class="headerlink" title="Gulp API&#x548C;&#x63D2;&#x4EF6;"></a>Gulp API&#x548C;&#x63D2;&#x4EF6;</h2><hr><h3 id="&#x4EFB;&#x52A1;"><a href="#&#x4EFB;&#x52A1;" class="headerlink" title="&#x4EFB;&#x52A1;"></a>&#x4EFB;&#x52A1;</h3><p><strong>gulp.task(taskName, [taskList(options)], fn)</strong></p><ul><li>taskName&#xFF1A;&#x4EFB;&#x52A1;&#x7684;&#x540D;&#x5B57;</li><li>taskList&#xFF1A; &#x4E00;&#x4E2A;&#x53EF;&#x9009;&#x7684;&#x53C2;&#x6570;&#xFF0C;&#x9700;&#x8981;&#x8FDE;&#x7EED;&#x6267;&#x884C;&#x7684;&#x4F9D;&#x8D56;&#x4EFB;&#x52A1;&#x5217;&#x8868;&#xFF0C;Array&#x6570;&#x7EC4;</li><li>fn&#xFF1A;&#x4EFB;&#x52A1;&#x7684;&#x64CD;&#x4F5C;&#x51FD;&#x6570;</li></ul><p><strong>Gulp</strong>&#x4E2D;&#x7684;&#x6838;&#x5FC3;&#x6982;&#x5FF5;&#x5C31;&#x662F;<strong>&#x4EFB;&#x52A1;</strong>&#xFF0C;&#x5728;&#x4E00;&#x6B21;&#x6784;&#x5EFA;&#x4E2D;&#x53EF;&#x80FD;&#x51FA;&#x73B0;&#x4E00;&#x4E2A;&#x4EFB;&#x52A1;&#xFF0C;&#x4E5F;&#x53EF;&#x80FD;&#x51FA;&#x73B0;&#x591A;&#x4E2A;&#x4EFB;&#x52A1;&#xFF0C;&#x4E0D;&#x540C;&#x7684;&#x4EFB;&#x52A1;&#x4E4B;&#x95F4;&#x53EF;&#x80FD;&#x6709;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x5355;&#x72EC;&#x6267;&#x884C;&#xFF0C;&#x4F8B;&#x5982;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require(&apos;gulp&apos;);				//&#x5F15;&#x5165;gulp&#x6A21;&#x5757;</span><br><span class="line"></span><br><span class="line">gulp.task(&apos;2&apos;, function() {				//&#x4F9D;&#x8D56;&#x4EFB;&#x52A1;2</span><br><span class="line">  console.log(&apos;run task 2&apos;);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">gulp.task(&apos;3&apos;, function() {				//&#x4F9D;&#x8D56;&#x4EFB;&#x52A1;3</span><br><span class="line">  console.log(&apos;run task 3&apos;);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">gulp.task(&apos;default&apos;, [&apos;2&apos;,&apos;3&apos;],function() {	//&#x6267;&#x884C;&#x5B8C;&#x4F9D;&#x8D56;&#x4EFB;&#x52A1;&#xFF0C;&#x63A5;&#x7740;&#x6267;&#x884C;&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;</span><br><span class="line">  console.log(&apos;run task default&apos;);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p></p><p>&#x4FDD;&#x5B58;&#x540E;&#x8FD0;&#x884C;gulp<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ gulp</span><br></pre></td></tr></table></figure><p></p><p>&#x8F93;&#x51FA;&#x5982;&#x4E0B;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">[21:22:16] Using gulpfile ~/Desktop/testGulp/gulpfile.js</span><br><span class="line">[21:22:16] Starting &apos;2&apos;...</span><br><span class="line">run task 2</span><br><span class="line">[21:22:16] Finished &apos;2&apos; after 223 &#x3BC;s</span><br><span class="line">[21:22:16] Starting &apos;3&apos;...</span><br><span class="line">run task 3</span><br><span class="line">[21:22:16] Finished &apos;3&apos; after 57 &#x3BC;s</span><br><span class="line">[21:22:16] Starting &apos;default&apos;...</span><br><span class="line">run task default</span><br><span class="line">[21:22:16] Finished &apos;default&apos; after 127 &#x3BC;s</span><br></pre></td></tr></table></figure><p></p><h3 id="&#x6765;&#x6E90;"><a href="#&#x6765;&#x6E90;" class="headerlink" title="&#x6765;&#x6E90;"></a>&#x6765;&#x6E90;</h3><p><strong>gulp.src(globs)</strong></p><ul><li>globs&#xFF1A;&#x53C2;&#x6570;&#x662F;String&#x6216;Array&#xFF0C;&#x7528;&#x4E8E;&#x5339;&#x914D;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x8DEF;&#x5F84;</li></ul><p><strong>Gulp</strong>&#x4E2D;&#x7684;&#x9996;&#x8981;&#x64CD;&#x4F5C;&#x5C31;&#x662F;<strong>&#x6765;&#x6E90;</strong>&#xFF0C;&#x6267;&#x884C;<strong>&#x4EFB;&#x52A1;</strong>&#x65F6;&#xFF0C;&#x9700;&#x8981;&#x63D0;&#x4F9B;&#x5339;&#x914D;&#x6A21;&#x5F0F;(golb)&#x6216;&#x8005;&#x5339;&#x914D;&#x6A21;&#x5F0F;&#x7684;&#x6570;&#x7EC4;(globs)&#x7684;&#x6E90;&#x6587;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x662F;&#x4E00;&#x4E2A;<a href="https://nodejs.org/api/stream.html#stream_stream" target="_blank" rel="external">Stream</a>&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<strong>Nodejs</strong>&#x7684;<strong>&#x7BA1;&#x9053;</strong>&#x6216;&#x8005;<strong>&#x94FE;&#x5F0F;</strong>&#x7684;&#x673A;&#x5236;<a href="https://nodejs.org/api/stream.html#stream_event_pipe" target="_blank" rel="external">pipe</a>&#x5165;&#x5176;&#x4ED6;<strong>&#x63D2;&#x4EF6;</strong>&#x8FDB;&#x884C;&#x64CD;&#x4F5C;&#x3002;&#x4F8B;&#x5982;&#xFF1A;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">gulp.src(&quot;js/index.js&quot;); 	//&#x5339;&#x914D;js&#x76EE;&#x5F55;&#x4E0B;&#x7684;index.js&#x6587;&#x4EF6;</span><br><span class="line">gulp.src(&quot;js/*.js&quot;);		//&#x5339;&#x914D;js&#x76EE;&#x5F55;&#x4E0B;&#xFF08;&#x4E0D;&#x5305;&#x62EC;&#x5B50;&#x76EE;&#x5F55;&#xFF09;&#x7684;&#x6709;js&#x6587;&#x4EF6;</span><br><span class="line">gulp.src(&quot;css/**/*.css&quot;)&#xFF1B;      //&#x5339;&#x914D;css&#x76EE;&#x5F55;&#x4E0B;&#x6240;&#x6709;css&#x6587;&#x4EF6;</span><br><span class="line">gulp.src([&quot;css/**/*.css&quot;, &quot;!css/**/*.min.css&quot;]); //&#x5339;&#x914D;css&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x975E;&#x538B;&#x7F29;css&#x6587;&#x4EF6;</span><br></pre></td></tr></table></figure><h3 id="&#x63D2;&#x4EF6;"><a href="#&#x63D2;&#x4EF6;" class="headerlink" title="&#x63D2;&#x4EF6;"></a>&#x63D2;&#x4EF6;</h3><p>&#x5339;&#x914D;&#x5230;&#x9700;&#x8981;&#x5904;&#x7406;&#x7684;<strong>&#x6765;&#x6E90;</strong>&#x6587;&#x4EF6;&#x540E;&#xFF0C;&#x5982;&#x679C;&#x8981;&#x5BF9;Css&#x3001;HTML&#x3001;Js&#x7B49;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;&#x7B49;&#x64CD;&#x4F5C;&#xFF0C;&#x5C31;&#x9700;&#x8981;&#x4F7F;&#x7528;<strong>Gulp</strong>&#x63D2;&#x4EF6;&#xFF0C;&#x6BD4;&#x8F83;&#x5E38;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#x6709;</p><ul><li><code>gulp-uglify</code> &#x538B;&#x7F29;Js&#x6587;&#x4EF6;</li><li><code>gulp-concat</code> &#x5408;&#x5E76;Js&#x6587;&#x4EF6;</li><li><code>gulp-less</code> &#x5C06;less&#x9884;&#x5904;&#x7406;&#x4E3A;css</li><li><code>gulp-sass</code> &#x5C06;sass&#x9884;&#x5904;&#x7406;&#x4E3A;css</li><li><code>gulp-autoprefixer</code> &#x4F7F;&#x7528;Autoprefixer&#x6765;&#x8865;&#x5168;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x7684;css</li><li><code>gulp-minify-css</code> &#x538B;&#x7F29;css</li><li><code>gulp-clean</code> &#x6E05;&#x9664;&#x76EE;&#x5F55;&#x6216;&#x6587;&#x4EF6;</li><li><code>gulp-util</code> &#x5DE5;&#x5177;&#x5E93;</li><li><code>gulp-changed</code> &#x53EA;&#x7F16;&#x8BD1;&#x4FEE;&#x6539;&#x8FC7;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x52A0;&#x5FEB;&#x901F;&#x5EA6;</li><li><code>gulp-minify-html</code> &#x538B;&#x7F29;html</li><li><code>gulp-imagemin</code> &#x538B;&#x7F29;&#x56FE;&#x7247;</li><li><code>gulp-rename</code> &#x91CD;&#x547D;&#x540D;&#x6587;&#x4EF6;,&#x901A;&#x5E38;&#x538B;&#x7F29;&#x540E;&#x7684;&#x5E26;.min&#x540E;&#x7F00;</li><li><code>gulp-load-plugins</code> &#x81EA;&#x52A8;&#x4E00;&#x952E;&#x52A0;&#x8F7D;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#xFF08;&#x5728;package.json&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x6A21;&#x5757;&#xFF09;</li><li><code>gulp-shell</code> &#x6267;&#x884C;shell&#x547D;&#x4EE4;</li></ul><p><strong>Gulp</strong>&#x63D2;&#x4EF6;&#x603B;&#x662F;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;stream&#x6765;&#x5904;&#x7406;&#x4EE5;&#x4E0B;&#x4E8B;&#x60C5;</p><ul><li>&#x63A5;&#x6536;&#x4E00;&#x4E2A;vinyl File&#x5BF9;&#x8C61;&#xFF0C;&#x4F8B;&#x5982;&#x63A5;&#x6536;&#x6E90;&#x6587;&#x4EF6;pipe&#x7684;&#x6D41;</li><li>&#x8F93;&#x51FA;&#x7ECF;&#x8FC7;&#x63D2;&#x4EF6;&#x5904;&#x7406;&#x7684;vinyl File&#x5BF9;&#x8C61;&#xFF0C;&#x4F8B;&#x5982;pipe&#x5230;&#x76EE;&#x7684;&#x6587;&#x4EF6;</li></ul><blockquote><p>&#x63D0;&#x793A;&#xFF1A; &#x63D2;&#x4EF6;&#x901A;&#x5E38;&#x662F;&#x7528;&#x7BA1;&#x9053;&#x6D41;&#x548C;&#x94FE;&#x5F0F;&#x6D41;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x5BF9;&#x8C61;&#xFF0C;&#x5B83;&#x4F1A;&#x5BF9;&#x4F20;&#x7ED9;&#x5B83;&#x7684;&#x5BF9;&#x8C61;&#x505A;&#x4E00;&#x4E9B;&#x8F6C;&#x6362;&#x5904;&#x7406;&#x3002;&#x4F7F;&#x7528;&#x63D2;&#x4EF6;&#x65F6;&#x5019;&#x9996;&#x5148;&#x9700;&#x8981;&#x5B89;&#x88C5;&#x63D2;&#x4EF6;&#xFF0C;&#x6CE8;&#x610F;&#x4E0E;&#x672C;&#x5730;&#x5B89;&#x88C5;<strong>Gulp</strong>&#x4E0D;&#x8981;&#x6DF7;&#x6DC6;&#xFF0C;&#x4E0D;&#x662F;&#x5B89;&#x88C5;&#x4E86;<strong>Gulp</strong>&#x5C31;&#x81EA;&#x52A8;&#x5B89;&#x88C5;&#x4E86;&#x63D2;&#x4EF6;&#x4E86;&#xFF0C;&#x5C31;&#x8DDF;<strong>Express</strong>&#x4E2D;&#x5B89;&#x88C5;&#x4E00;&#x4E9B;&#x7279;&#x5B9A;&#x7684;&#x4E2D;&#x95F4;&#x4EF6;&#x662F;&#x4E00;&#x4E2A;&#x9053;&#x7406;&#x3002;</p></blockquote><h4 id="&#x5B89;&#x88C5;&#x63D2;&#x4EF6;"><a href="#&#x5B89;&#x88C5;&#x63D2;&#x4EF6;" class="headerlink" title="&#x5B89;&#x88C5;&#x63D2;&#x4EF6;"></a>&#x5B89;&#x88C5;&#x63D2;&#x4EF6;</h4><p>&#x8FDB;&#x5165;<strong>&#x9879;&#x76EE;&#x76EE;&#x5F55;</strong>&#xFF0C;&#x4F8B;&#x5982;&#x5728;&#x4E0A;&#x9762;&#x5DF2;&#x7ECF;&#x65B0;&#x5EFA;&#x597D;&#x7684;<code>testGulp</code>&#x76EE;&#x5F55;&#x5B89;&#x88C5;&#x63D2;&#x4EF6;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cnpm install [plugins-name] --save</span><br></pre></td></tr></table></figure><p></p><ul><li><code>[plugins-name]</code>: &#x53EF;&#x4EE5;&#x540C;&#x65F6;&#x5B89;&#x88C5;&#x591A;&#x4E2A;&#x63D2;&#x4EF6;&#xFF0C;&#x7528;&#x7A7A;&#x683C;&#x9694;&#x5F00;</li><li><code>--save</code>&#xFF1A;&#x4F1A;&#x628A;&#x63D2;&#x4EF6;&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x4F9D;&#x8D56;&#x5199;&#x5165;<code>package.json</code>&#x6587;&#x4EF6;</li></ul><p>&#x4F8B;&#x5982;&#x5B89;&#x88C5; <code>gulp-uglify</code>&#x63D2;&#x4EF6;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cnpm install gulp-uglify --save</span><br></pre></td></tr></table></figure><p></p><p>&#x67E5;&#x770B;&#x4F9D;&#x8D56;&#x5217;&#x8868;<code>package.json</code>&#x6587;&#x4EF6;&#xFF0C;&#x5DF2;&#x7ECF;&#x6709;&#x4E86;&#x63D2;&#x4EF6;&#x4F9D;&#x8D56;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line">  &quot;name&quot;: &quot;gulp&quot;,</span><br><span class="line">  &quot;version&quot;: &quot;1.0.0&quot;,</span><br><span class="line">  &quot;description&quot;: &quot;&quot;,</span><br><span class="line">  &quot;main&quot;: &quot;index.js&quot;,</span><br><span class="line">  &quot;scripts&quot;: {</span><br><span class="line">    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><br><span class="line">  },</span><br><span class="line">  &quot;author&quot;: &quot;&quot;,</span><br><span class="line">  &quot;license&quot;: &quot;ISC&quot;,</span><br><span class="line">  &quot;dependencies&quot;: {</span><br><span class="line">    &quot;gulp&quot;: &quot;^3.9.1&quot;,</span><br><span class="line">    &quot;gulp-uglify&quot;: &quot;^1.5.3&quot;</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h4 id="&#x5F15;&#x5165;&#x63D2;&#x4EF6;"><a href="#&#x5F15;&#x5165;&#x63D2;&#x4EF6;" class="headerlink" title="&#x5F15;&#x5165;&#x63D2;&#x4EF6;"></a>&#x5F15;&#x5165;&#x63D2;&#x4EF6;</h4><p>&#x5982;&#x679C;&#x8981;&#x4F7F;&#x7528;&#x5B89;&#x88C5;&#x7684;&#x63D2;&#x4EF6;&#xFF0C;&#x5C31;&#x9700;&#x8981;&#x5728;<code>gulpfile.js</code>&#x6587;&#x4EF6;&#x4E2D;&#x5F15;&#x5165;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var name = require(plugin-name);</span><br></pre></td></tr></table></figure><h4 id="&#x4F7F;&#x7528;&#x63D2;&#x4EF6;&#x793A;&#x4F8B;"><a href="#&#x4F7F;&#x7528;&#x63D2;&#x4EF6;&#x793A;&#x4F8B;" class="headerlink" title="&#x4F7F;&#x7528;&#x63D2;&#x4EF6;&#x793A;&#x4F8B;"></a>&#x4F7F;&#x7528;&#x63D2;&#x4EF6;&#x793A;&#x4F8B;</h4><p>&#x4F8B;&#x5982;&#x628A;&#x9700;&#x8981;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#x653E;&#x5165;<code>src/js/</code>&#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x5904;&#x7406;&#x540E;&#x7684;&#x6587;&#x4EF6;&#x653E;&#x5165;<code>dst/js/</code>&#x76EE;&#x5F55;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require(&apos;gulp&apos;);				//&#x5F15;&#x5165;gulp&#x6A21;&#x5757;</span><br><span class="line">var uglify = require(&apos;gulp-uglify&apos;);	//&#x5F15;&#x5165;gulp-ugilfy&#x63D2;&#x4EF6;</span><br><span class="line"></span><br><span class="line">gulp.task(&apos;default&apos;, function() {</span><br><span class="line">   gulp.src(&quot;src/js/index.js&quot;)</span><br><span class="line">	  .pipe(uglify())              		//&#x4F7F;&#x7528;gulp-uglify&#x63D2;&#x4EF6;&#x538B;&#x7F29;js&#x76EE;&#x5F55;&#x4E0B;&#x7684;index.js&#x6587;&#x4EF6;</span><br><span class="line">	  .pipe(gulp.dest(&quot;dst/js/&quot;));      //&#x538B;&#x7F29;&#x540E;&#x8F93;&#x51FA;&#x5230;&#x76EE;&#x6807;&#x76EE;&#x5F55;&#xFF0C;&#x4FDD;&#x6301;&#x6587;&#x4EF6;&#x539F;&#x540D;</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p></p><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x5339;&#x914D;<code>js</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;<code>index.js</code>&#x6587;&#x4EF6;&#xFF0C;&#x5728; <strong>src</strong>&#x4E2D;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;Stream&#xFF0C;&#x7136;&#x540E;&#x901A;&#x8FC7;Nodejs&#x7684;&#x94FE;&#x5F0F;&#x673A;&#x5236;<strong>pipe</strong>&#x5165;<code>gulp-uglify</code>&#x63D2;&#x4EF6;&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF0C;&#x6700;&#x540E;&#x63D2;&#x4EF6;&#x8F93;&#x51FA;&#x7684;Stream&#x6D41;&#x5165;<strong>dest</strong>&#x5904;&#x7406;&#xFF0C;&#x6700;&#x7EC8;&#x5C06;&#x538B;&#x7F29;&#x7684;Js&#x6587;&#x4EF6;&#x4FDD;&#x5B58;&#x5230;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;<code>js</code>&#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x6587;&#x4EF6;&#x540D;&#x4E0D;&#x53D8;&#xFF0C;&#x4ECD;&#x7136;&#x662F;<code>index.js</code>&#x3002;</p></blockquote><p><code>src/js/</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;<code>index.js</code><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var apple = 1;</span><br><span class="line">var origin  = 2;</span><br><span class="line"></span><br><span class="line">function sum(plus1,plus2){</span><br><span class="line">	return plus1 + plus2;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">sum(apple,origin);</span><br></pre></td></tr></table></figure><p></p><p><code>dst/js/</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;<code>index.js</code><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">function sum(i,n){return i+n}var apple=1,origin=2;sum(apple,origin);</span><br></pre></td></tr></table></figure><p></p><h3 id="&#x76EE;&#x6807;"><a href="#&#x76EE;&#x6807;" class="headerlink" title="&#x76EE;&#x6807;"></a>&#x76EE;&#x6807;</h3><p><strong>gulp.dest(path)</strong></p><ul><li>path&#xFF1A;&#x5904;&#x7406;&#x5B8C;&#x4EE5;&#x540E;&#x7684;&#x6587;&#x4EF6;&#x9700;&#x8981;&#x5B58;&#x653E;&#x7684;&#x8DEF;&#x5F84;&#xFF0C;&#x5982;&#x679C;&#x8DEF;&#x5F84;&#x4E0D;&#x5B58;&#x5728;&#x4F1A;&#x81EA;&#x52A8;&#x521B;&#x5EFA;</li></ul><p>&#x4F7F;&#x7528;<strong>&#x63D2;&#x4EF6;</strong>&#x5904;&#x7406;&#x5B8C;&#x6E90;&#x6587;&#x4EF6;&#x540E;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;<strong>pipe</strong>&#x8FDB;<strong>&#x76EE;&#x6807;</strong>&#x51FD;&#x6570;&#xFF0C;<strong>&#x76EE;&#x6807;</strong>&#x51FD;&#x6570;&#x4F1A;&#x8FDB;&#x884C;&#x5199;&#x6587;&#x4EF6;&#x5904;&#x7406;&#xFF0C;&#x53EF;&#x4EE5;<strong>pipe</strong>&#x5230;&#x591A;&#x4E2A;&#x6587;&#x4EF6;&#x5939;&#xFF0C;&#x5982;&#x679C;&#x6587;&#x4EF6;&#x5939;&#x4E0D;&#x5B58;&#x5728;&#x5C31;&#x4F1A;&#x81EA;&#x52A8;&#x521B;&#x5EFA;&#x5B83;&#xFF0C;&#x4F8B;&#x5982;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require(&apos;gulp&apos;);				</span><br><span class="line">var uglify = require(&apos;gulp-uglify&apos;);	</span><br><span class="line"></span><br><span class="line">gulp.task(&apos;default&apos;, function() {</span><br><span class="line">   gulp.src(&quot;src/js/index.js&quot;)</span><br><span class="line">	  .pipe(uglify())              		</span><br><span class="line">	  .pipe(gulp.dest(&quot;dst/js/&quot;));      //&#x538B;&#x7F29;&#x540E;&#x8F93;&#x51FA;&#x5230;&#x76EE;&#x6807;&#x76EE;&#x5F55;&#xFF0C;&#x4FDD;&#x6301;&#x6587;&#x4EF6;&#x539F;&#x540D;</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="&#x76D1;&#x89C6;"><a href="#&#x76D1;&#x89C6;" class="headerlink" title="&#x76D1;&#x89C6;"></a>&#x76D1;&#x89C6;</h3><p><strong>gulp.watch(glob [,opts,cb])</strong></p><ul><li>golb&#xFF1A;&#x53C2;&#x6570;&#x662F;String&#xFF0C;&#x7528;&#x4E8E;&#x5339;&#x914D;&#x9700;&#x8981;&#x76D1;&#x89C6;&#x6587;&#x4EF6;&#x7684;&#x8DEF;&#x5F84;</li><li>cb&#xFF1A;&#x76D1;&#x89C6;&#x6587;&#x4EF6;&#x53D8;&#x5316;&#x65F6;&#x6267;&#x884C;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;callback&#xFF0C;&#x4F1A;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x540D;&#x4E3A;<code>event</code>&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x8BE5;&#x5BF9;&#x8C61;&#x63CF;&#x8FF0;&#x4E86;&#x76D1;&#x63A7;&#x5230;&#x7684;&#x53D8;&#x52A8;</li></ul><p><strong>Gulp</strong>&#x7684;<strong>&#x76D1;&#x89C6;</strong>&#x65B9;&#x6CD5;&#x7528;&#x6765;&#x76D1;&#x542C;&#x6587;&#x4EF6;&#x7684;&#x53D8;&#x5316;&#xFF0C;&#x6587;&#x4EF6;&#x4E00;&#x65E6;&#x6709;&#x4FEE;&#x6539;&#x5C31;&#x4F1A;&#x7ACB;&#x5373;&#x6267;&#x884C;&#x76F8;&#x5E94;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF0C;&#x4F8B;&#x5982;&#x4FEE;&#x6539;&#x4E86;HTML&#x6587;&#x4EF6;&#xFF0C;&#x4ECD;&#x7136;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x5BF9;&#x5B83;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5904;&#x7406;&#xFF0C;&#x8FD9;&#x65F6;&#x5C31;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x76D1;&#x89C6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x6765;&#x5904;&#x7406;&#x538B;&#x7F29;&#x3002;&#x4F8B;&#x5982;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">gulp.task(&apos;default&apos;, function() {</span><br><span class="line">	gulp.watch(&apos;src/**/*.js&apos;,[&quot;js&quot;]); //&#x5982;&#x679C;src&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x6240;&#x6709;js&#x6709;&#x53D8;&#x5316;&#xFF0C;&#x5219;&#x6267;&#x884C;js&#x4EFB;&#x52A1;</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="&#x5C0F;&#x7ED3;"><a href="#&#x5C0F;&#x7ED3;" class="headerlink" title="&#x5C0F;&#x7ED3;"></a>&#x5C0F;&#x7ED3;</h3><p>&#x56DE;&#x987E;&#x4E00;&#x4E0B;&#xFF0C;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;<strong>Gulp</strong>&#x5C31;&#x56DB;&#x4E2A;API</p><ul><li>&#x4EFB;&#x52A1;&#xFF1A;<strong>gulp.task(taskName, [taskList(options)], fn)</strong></li><li>&#x6765;&#x6E90;&#xFF1A;<strong>gulp.src(globs)</strong></li><li>&#x76EE;&#x6807;&#xFF1A; <strong>gulp.dest(path)</strong></li><li>&#x76D1;&#x89C6;&#xFF1A;<strong>gulp.watch(glob [,opts,cb])</strong></li></ul><p>&#x5BF9;&#x4E8E;&#x4EE5;&#x4E0A;&#x56DB;&#x4E2A;API&#x6587;&#x4E2D;&#x90FD;&#x6709;&#x8BF4;&#x660E;&#xFF0C;&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;<strong>&#x63D2;&#x4EF6;</strong>&#x4E0D;&#x5C5E;&#x4E8E;API&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x9700;&#x8981;&#x672C;&#x5730;&#x5B89;&#x88C5;&#x548C;&#x6A21;&#x677F;&#x5BFC;&#x5165;&#x4F7F;&#x7528;&#x3002;&#x8FD9;&#x91CC;&#x662F;&#x4E3A;&#x4E86;&#x8BF4;&#x660E;<strong>Gulp</strong>&#x7684;&#x4F7F;&#x7528;&#xFF0C;&#x6240;&#x4EE5;&#x624D;&#x5C06;<strong>&#x63D2;&#x4EF6;</strong>&#x653E;&#x5728;&#x4E86;API&#x7684;&#x987A;&#x5E8F;&#x4E2D;&#x3002;</p><h2 id="&#x4F18;&#x5316;Hexo&#x535A;&#x5BA2;"><a href="#&#x4F18;&#x5316;Hexo&#x535A;&#x5BA2;" class="headerlink" title="&#x4F18;&#x5316;Hexo&#x535A;&#x5BA2;"></a>&#x4F18;&#x5316;Hexo&#x535A;&#x5BA2;</h2><hr><p>&#x65E2;&#x7136;&#x5B66;&#x4F1A;&#x4E86;&#x5982;&#x4F55;&#x4F7F;&#x7528;<strong>Gulp</strong>&#xFF0C;&#x5F53;&#x7136;&#x662F;&#x4E3A;&#x4E86;&#x5BF9;&#x7F51;&#x9875;&#x7684;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5904;&#x7406;&#xFF0C;&#x4ECE;&#x800C;&#x51CF;&#x5C11;HTTP&#x8BF7;&#x6C42;&#x4E3B;&#x4F53;&#x7684;&#x6587;&#x4EF6;&#x5927;&#x5C0F;&#xFF0C;&#x9996;&#x5148;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x77E5;&#x9053;&#x7684;&#x662F;<strong>HEXO</strong>&#x4E2D;&#x7684;&#x9759;&#x6001;&#x6587;&#x4EF6;&#x9ED8;&#x8BA4;&#x653E;&#x5728;&#x9879;&#x76EE;&#x6839;&#x76EE;&#x5F55;&#x7684;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x6240;&#x4EE5;&#x9700;&#x8981;&#x538B;&#x7F29;&#x7684;&#x6587;&#x4EF6;&#x90FD;&#x5728;&#x6B64;&#x76EE;&#x5F55;&#x4E0B;&#x3002;</p><h3 id="&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;-1"><a href="#&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;-1" class="headerlink" title="&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;"></a>&#x4F5C;&#x4E3A;&#x9879;&#x76EE;&#x7684;&#x5F00;&#x53D1;&#x4F9D;&#x8D56;&#x5B89;&#x88C5;</h3><p>&#x8FD9;&#x91CC;&#x5C31;&#x4E0D;&#x5728;&#x591A;&#x505A;&#x8BF4;&#x660E;&#xFF0C;&#x8BE6;&#x7EC6;&#x770B;&#x4E0A;&#x9762;&#x7684;&#x540C;&#x540D;&#x7AE0;&#x8282;&#x64CD;&#x4F5C;&#x3002;</p><h3 id="&#x5B89;&#x88C5;&#x63D2;&#x4EF6;-1"><a href="#&#x5B89;&#x88C5;&#x63D2;&#x4EF6;-1" class="headerlink" title="&#x5B89;&#x88C5;&#x63D2;&#x4EF6;"></a>&#x5B89;&#x88C5;&#x63D2;&#x4EF6;</h3><p>&#x4F18;&#x5316;HEXO&#x9700;&#x8981;&#x5B89;&#x88C5;&#x7684;&#x63D2;&#x4EF6;&#x6709;</p><ul><li><code>gulp-uglify</code> &#x538B;&#x7F29;Js&#x6587;&#x4EF6;</li><li><code>gulp-minify-css</code> &#x538B;&#x7F29;css</li><li><code>gulp-clean</code> &#x6E05;&#x9664;&#x76EE;&#x5F55;&#x6216;&#x6587;&#x4EF6;</li><li><code>gulp-htmlclean</code> &#x538B;&#x7F29;html</li><li><code>gulp-htmlmin</code> &#x538B;&#x7F29;html&#x4E2D;&#x7684;css&#x548C;js</li><li><code>gulp-imagemin</code> &#x538B;&#x7F29;&#x56FE;&#x7247;</li><li><code>gulp-rename</code> &#x91CD;&#x547D;&#x540D;&#x6587;&#x4EF6;,&#x901A;&#x5E38;&#x538B;&#x7F29;&#x540E;&#x7684;&#x5E26;.min&#x540E;&#x7F00;</li><li><code>gulp-load-plugins</code> &#x81EA;&#x52A8;&#x4E00;&#x952E;&#x52A0;&#x8F7D;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#xFF08;&#x5728;package.json&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x6A21;&#x5757;&#xFF09;</li><li><code>gulp-shell</code> &#x6267;&#x884C;shell&#x547D;&#x4EE4;</li></ul><p>&#x5B89;&#x88C5;&#x8FD9;&#x4E9B;&#x6A21;&#x5757;<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install -d --save gulp-clean gulp-htmlclean gulp-load-plugins gulp-minify-css gulp-htmlmin gulp-rename gulp-uglify gulp-shell gulp-imagemin</span><br></pre></td></tr></table></figure><p></p><h3 id="&#x4F18;&#x5316;Hexo"><a href="#&#x4F18;&#x5316;Hexo" class="headerlink" title="&#x4F18;&#x5316;Hexo"></a>&#x4F18;&#x5316;Hexo</h3><p>&#x4F18;&#x5316;&#x7684;&#x601D;&#x8DEF;&#x662F;&#x5148;&#x5C06;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x6240;&#x6709;&#x9700;&#x8981;&#x538B;&#x7F29;&#x7684;&#x6587;&#x4EF6;&#x653E;&#x7F6E;&#x5728;&#x6839;&#x76EE;&#x5F55;&#x7684;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x6BCF;&#x6B21;&#x538B;&#x7F29;&#x524D;&#x9700;&#x8981;&#x6E05;&#x7A7A;<code>dst</code>&#x76EE;&#x5F55;&#x4E2D;&#x7684;&#x6587;&#x4EF6;&#x3002;&#x4F18;&#x5316;&#x540E;&#x4ECD;&#x7136;&#x9700;&#x8981;&#x5C06;<code>dst</code>&#x76EE;&#x5F55;&#x4E2D;&#x7684;&#x6587;&#x4EF6;&#x79FB;&#x56DE;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x3002;</p><h4 id="&#x521B;&#x5EFA;&#x4EFB;&#x52A1;"><a href="#&#x521B;&#x5EFA;&#x4EFB;&#x52A1;" class="headerlink" title="&#x521B;&#x5EFA;&#x4EFB;&#x52A1;"></a>&#x521B;&#x5EFA;&#x4EFB;&#x52A1;</h4><p>&#x9996;&#x5148;&#x52A0;&#x8F7D;&#x5B89;&#x88C5;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x53EF;&#x4EE5;&#x5229;&#x7528;<code>gulp-load-plugins</code>&#x63D2;&#x4EF6;&#x4E00;&#x952E;&#x5BFC;&#x5165;&#x4EE5;&#x4E0A;&#x5B89;&#x88C5;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x800C;&#x4E0D;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x4E2A;&#x5728;<code>gulpfile.js</code>&#x4E2D;&#x52A0;&#x8F7D;&#x3002;&#x5728;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x65B0;&#x5EFA;<code>gulpfile.js</code>&#x6587;&#x4EF6;&#xFF0C;&#x521B;&#x5EFA;&#x5404;&#x4E2A;&#x4EFB;&#x52A1;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require(&apos;gulp&apos;);</span><br><span class="line">var gulpLoadPlugins = require(&apos;gulp-load-plugins&apos;); //&#x6A21;&#x5757;&#x4E0D;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x4E2A;&#x52A0;&#x8F7D;&#xFF0C;&#x6839;&#x636E;package.json&#x4E00;&#x952E;&#x52A0;&#x8F7D;</span><br><span class="line">plugins = gulpLoadPlugins();	//plugins&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-load-plugins&#x63D2;&#x4EF6;</span><br><span class="line"></span><br><span class="line">/*&#x538B;&#x7F29;html*/</span><br><span class="line">gulp.task(&quot;html&quot;,function() {</span><br><span class="line">	console.log(&apos;Html compress finsihed!&apos;);</span><br><span class="line">	</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">/*&#x538B;&#x7F29;css*/</span><br><span class="line">gulp.task(&quot;css&quot;,function() {</span><br><span class="line">	console.log(&apos;Css compress finsihed!&apos;);</span><br><span class="line">	</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">/*&#x538B;&#x7F29;js*/</span><br><span class="line">gulp.task(&quot;js&quot;,function() {</span><br><span class="line">	console.log(&apos;Js compress finsihed!&apos;);</span><br><span class="line">	</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">/*&#x538B;&#x7F29;image*/</span><br><span class="line">gulp.task(&quot;image&quot;,function() {</span><br><span class="line">	console.log(&apos;Image compress finsihed!&apos;);</span><br><span class="line">   </span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">/*&#x6E05;&#x7406;&#x4EFB;&#x52A1;*/</span><br><span class="line">gulp.task(&quot;clean&quot;,function() {</span><br><span class="line">	console.log(&apos;Dst clean finsihed!&apos;);</span><br><span class="line">   </span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">/*&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;*/</span><br><span class="line">gulp.task(&quot;default&quot;,[&quot;clean&quot;,&quot;html&quot;,&quot;css&quot;,&quot;js&quot;,&quot;image&quot;],function() {</span><br><span class="line">	console.log(&quot;Gulp run finished!&quot;);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">/*&#x66FF;&#x6362;&#x4EFB;&#x52A1;*/</span><br><span class="line">gulp.task(&quot;g&quot;, function(){</span><br><span class="line">	</span><br><span class="line">	console.log(&quot;Mv file finished!&quot;);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h4 id="&#x4F18;&#x5316;&#x6B65;&#x9AA4;"><a href="#&#x4F18;&#x5316;&#x6B65;&#x9AA4;" class="headerlink" title="&#x4F18;&#x5316;&#x6B65;&#x9AA4;"></a>&#x4F18;&#x5316;&#x6B65;&#x9AA4;</h4><ul><li>&#x6E05;&#x7406;&#x4EFB;&#x52A1;&#xFF1A;&#x60F3;&#x8981;&#x63A8;&#x9001;&#x5230;&#x8FDC;&#x7A0B;&#x65F6;&#xFF0C;&#x9996;&#x5148;&#x8981;&#x4F18;&#x5316;&#x6587;&#x4EF6;&#xFF0C;&#x5148;&#x6267;&#x884C;<code>gulp clean</code>&#x6E05;&#x7A7A;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x6587;&#x4EF6;&#x3002;</li><li>&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;&#xFF1A;&#x63A5;&#x7740;&#x5C31;&#x53EF;&#x4EE5;&#x5BF9;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x4E86;&#xFF0C;&#x6267;&#x884C;<code>gulp</code>&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5904;&#x7406;&#x3002;</li><li>&#x66FF;&#x6362;&#x4EFB;&#x52A1;&#xFF1A;&#x6700;&#x540E;&#x6267;&#x884C;<code>gulp g</code>&#x5C06;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x90E8;&#x5206;&#x53EF;&#x538B;&#x7F29;&#x6587;&#x4EF6;&#x4F7F;&#x7528;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x538B;&#x7F29;&#x6587;&#x4EF6;&#x66FF;&#x6362;&#x3002;</li></ul><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x987A;&#x5E8F;&#x4E00;&#x5B9A;&#x4E0D;&#x8981;&#x6DF7;&#x4E71;&#xFF0C;&#x5426;&#x5219;&#x53EF;&#x80FD;&#x51FA;&#x73B0;&#x610F;&#x60F3;&#x4E0D;&#x5230;&#x7684;&#x7ED3;&#x679C;&#x3002;&#x5F53;&#x7136;&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;&#x8FD8;&#x53EF;&#x4EE5;&#x5206;&#x89E3;&#xFF0C;&#x5355;&#x72EC;&#x6267;&#x884C;&#x4EFB;&#x52A1;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#x4EFB;&#x52A1;&#x3002;&#x6267;&#x884C;&#x5B8C;&#x66FF;&#x6362;&#x4EFB;&#x52A1;&#x540E;&#xFF0C;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x9759;&#x6001;&#x6587;&#x4EF6;&#x5C31;&#x662F;&#x538B;&#x7F29;&#x540E;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x6B64;&#x65F6;&#x53EF;&#x4EE5;&#x5C06;&#x5185;&#x5BB9;&#x63A8;&#x9001;&#x5230;&#x8FDC;&#x7A0B;&#x3002;</p></blockquote><h3 id="&#x4EFB;&#x52A1;&#x8BE6;&#x89E3;"><a href="#&#x4EFB;&#x52A1;&#x8BE6;&#x89E3;" class="headerlink" title="&#x4EFB;&#x52A1;&#x8BE6;&#x89E3;"></a>&#x4EFB;&#x52A1;&#x8BE6;&#x89E3;</h3><h4 id="&#x6E05;&#x7406;&#x4EFB;&#x52A1;"><a href="#&#x6E05;&#x7406;&#x4EFB;&#x52A1;" class="headerlink" title="&#x6E05;&#x7406;&#x4EFB;&#x52A1;"></a>&#x6E05;&#x7406;&#x4EFB;&#x52A1;</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/*&#x6E05;&#x7406;&#x4EFB;&#x52A1;*/</span><br><span class="line">gulp.task(&quot;clean&quot;,function() {</span><br><span class="line">	console.log(&apos;Dst clean finsihed!&apos;);</span><br><span class="line">	return gulp.src(&quot;./dst/*&quot;)</span><br><span class="line">		.pipe(plugins.clean());  //plugins.clean()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-clean&#x63D2;&#x4EF6;</span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x53EF;&#x4EE5;&#x5728;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x521B;&#x5EFA;&#x4E00;&#x4E9B;&#x4E34;&#x65F6;&#x6587;&#x4EF6;&#x5E76;&#x6267;&#x884C;<code>gulp</code>&#x547D;&#x4EE4;&#x67E5;&#x770B;&#x662F;&#x5426;&#x6E05;&#x9664;&#x4E86;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x6240;&#x6709;&#x6587;&#x4EF6;&#x3002;</p></blockquote><h4 id="&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;"><a href="#&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;" class="headerlink" title="&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;"></a>&#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;</h4><h5 id="&#x538B;&#x7F29;html"><a href="#&#x538B;&#x7F29;html" class="headerlink" title="&#x538B;&#x7F29;html"></a>&#x538B;&#x7F29;html</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">/*&#x538B;&#x7F29;html*/</span><br><span class="line">gulp.task(&quot;html&quot;,function() {</span><br><span class="line">	console.log(&apos;Html compress finsihed!&apos;);</span><br><span class="line">	return gulp.src(&quot;public/**/*.html&quot;)</span><br><span class="line">		.pipe(plugins.htmlclean()) //plugins.htmlclean()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-htmlclean&#x63D2;&#x4EF6;</span><br><span class="line">		.pipe(plugins.htmlmin({ //plugins.htmlmin()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-htmlmin&#x63D2;&#x4EF6;</span><br><span class="line">			removeComments: true,</span><br><span class="line">			minifyJS: true,</span><br><span class="line">			minifyCSS: true,</span><br><span class="line">			minifyURLs: true,</span><br><span class="line">			minifyHTML: true</span><br><span class="line">	}))		</span><br><span class="line">	.pipe(gulp.dest(&quot;./dst/&quot;));</span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x6267;&#x884C;<code>gulp</code>&#x547D;&#x4EE4;&#x5E76;&#x67E5;&#x770B;&#x662F;&#x5426;&#x5728;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x751F;&#x6210;&#x4E86;&#x538B;&#x7F29;&#x7684;html&#x6587;&#x4EF6;&#x3002;</p></blockquote><h5 id="&#x538B;&#x7F29;css"><a href="#&#x538B;&#x7F29;css" class="headerlink" title="&#x538B;&#x7F29;css"></a>&#x538B;&#x7F29;css</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/*&#x538B;&#x7F29;css*/</span><br><span class="line">gulp.task(&quot;css&quot;,function() {</span><br><span class="line">	console.log(&apos;Css compress finsihed!&apos;);</span><br><span class="line">	return gulp.src([&quot;public/**/*.css&quot;, &quot;!public/**/*.min.css&quot;])</span><br><span class="line">		.pipe(plugins.minifyCss()) //plugins.minifyCss()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-minify-css&#x63D2;&#x4EF6;</span><br><span class="line">		.pipe(gulp.dest(&quot;./dst/&quot;));</span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x6267;&#x884C;<code>gulp</code>&#x547D;&#x4EE4;&#x5E76;&#x67E5;&#x770B;&#x662F;&#x5426;&#x5728;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x751F;&#x6210;&#x4E86;&#x538B;&#x7F29;&#x7684;css&#x6587;&#x4EF6;&#x3002;</p></blockquote><h5 id="&#x538B;&#x7F29;js"><a href="#&#x538B;&#x7F29;js" class="headerlink" title="&#x538B;&#x7F29;js"></a>&#x538B;&#x7F29;js</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/*&#x538B;&#x7F29;js*/</span><br><span class="line">gulp.task(&quot;js&quot;,function() {</span><br><span class="line">	console.log(&apos;Js compress finsihed!&apos;);</span><br><span class="line">	return gulp.src([&quot;public/**/*.js&quot;, &quot;!public/**/*.min.js&quot;])</span><br><span class="line">		.pipe(plugins.uglify())	//plugins.uglify()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-uglify&#x63D2;&#x4EF6;</span><br><span class="line">		.pipe(gulp.dest(&quot;./dst/&quot;));</span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x6267;&#x884C;<code>gulp</code>&#x547D;&#x4EE4;&#x5E76;&#x67E5;&#x770B;&#x662F;&#x5426;&#x5728;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x751F;&#x6210;&#x4E86;&#x538B;&#x7F29;&#x7684;js&#x6587;&#x4EF6;&#x3002;</p></blockquote><h5 id="&#x538B;&#x7F29;image"><a href="#&#x538B;&#x7F29;image" class="headerlink" title="&#x538B;&#x7F29;image"></a>&#x538B;&#x7F29;image</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">/*&#x538B;&#x7F29;image*/</span><br><span class="line">gulp.task(&quot;image&quot;,function() {</span><br><span class="line">	console.log(&apos;Image compress finsihed!&apos;);</span><br><span class="line">	gulp.src(&apos;public/images/*.*&apos;)	//&#x6B64;&#x538B;&#x7F29;&#x4E3B;&#x8981;&#x9488;&#x5BF9;HEXO&#x9ED8;&#x8BA4;&#x56FE;&#x7247;</span><br><span class="line">		.pipe(plugins.imagemin({</span><br><span class="line">			progressive: true</span><br><span class="line">	}))</span><br><span class="line">	.pipe(gulp.dest(&apos;./dst/images/&apos;));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">	gulp.src(&apos;public/**/*.jpg&apos;)	//&#x6B64;&#x538B;&#x7F29;&#x4E3B;&#x8981;&#x9488;&#x5BF9;&#x4E2A;&#x4EBA;&#x56FE;&#x7247;,&#x4E2A;&#x4EBA;&#x56FE;&#x7247;&#x683C;&#x5F0F;&#x8981;&#x6C42;&#x4E3A;.jpg&#x683C;&#x5F0F;</span><br><span class="line">		.pipe(plugins.imagemin({</span><br><span class="line">			progressive: true</span><br><span class="line">	}))</span><br><span class="line">	.pipe(gulp.dest(&apos;./dst/&apos;));</span><br><span class="line"></span><br><span class="line">	gulp.src(&apos;public/**/*.jpeg&apos;)	//&#x6B64;&#x538B;&#x7F29;&#x4E3B;&#x8981;&#x9488;&#x5BF9;&#x4E2A;&#x4EBA;&#x56FE;&#x7247;,&#x4E2A;&#x4EBA;&#x56FE;&#x7247;&#x683C;&#x5F0F;&#x8981;&#x6C42;&#x4E3A;.jpeg&#x683C;&#x5F0F;</span><br><span class="line">		.pipe(plugins.imagemin({</span><br><span class="line">			progressive: true</span><br><span class="line">	}))</span><br><span class="line">	.pipe(gulp.dest(&apos;./dst/&apos;));  </span><br><span class="line"></span><br><span class="line">	gulp.src(&apos;public/**/*.png&apos;)	//&#x6B64;&#x538B;&#x7F29;&#x4E3B;&#x8981;&#x9488;&#x5BF9;&#x4E2A;&#x4EBA;&#x56FE;&#x7247;,&#x4E2A;&#x4EBA;&#x56FE;&#x7247;&#x683C;&#x5F0F;&#x8981;&#x6C42;&#x4E3A;.png&#x683C;&#x5F0F;</span><br><span class="line">		.pipe(plugins.imagemin({</span><br><span class="line">			progressive: true</span><br><span class="line">	}))</span><br><span class="line">	.pipe(gulp.dest(&apos;./dst/&apos;));   </span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x6267;&#x884C;<code>gulp</code>&#x547D;&#x4EE4;&#x5E76;&#x67E5;&#x770B;&#x662F;&#x5426;&#x5728;<code>dst</code>&#x76EE;&#x5F55;&#x4E0B;&#x751F;&#x6210;&#x4E86;&#x538B;&#x7F29;&#x7684;image&#x6587;&#x4EF6;&#x3002;</p></blockquote><h4 id="&#x66FF;&#x6362;&#x4EFB;&#x52A1;"><a href="#&#x66FF;&#x6362;&#x4EFB;&#x52A1;" class="headerlink" title="&#x66FF;&#x6362;&#x4EFB;&#x52A1;"></a>&#x66FF;&#x6362;&#x4EFB;&#x52A1;</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">/*&#x66FF;&#x6362;&#x4EFB;&#x52A1;*/</span><br><span class="line">gulp.task(&quot;g&quot;, function(){</span><br><span class="line">	console.log(&quot;Mv file finished!&quot;);</span><br><span class="line">	return gulp.src(&quot;./dst/*&quot;)</span><br><span class="line">		.pipe(plugins.shell([ //plugins.shell()&#x4E3A;&#x52A0;&#x8F7D;&#x7684;gulp-shell&#x63D2;&#x4EF6;</span><br><span class="line">			&quot;cp -r ./dst/* ./public/&quot;</span><br><span class="line">	]));</span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x53EF;&#x4EE5;&#x5728;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x67E5;&#x770B;&#x662F;&#x5426;&#x751F;&#x6210;&#x4E86;&#x538B;&#x7F29;&#x7684;&#x6587;&#x4EF6;&#x3002;</p></blockquote><h3 id="&#x5C0F;&#x7ED3;-1"><a href="#&#x5C0F;&#x7ED3;-1" class="headerlink" title="&#x5C0F;&#x7ED3;"></a>&#x5C0F;&#x7ED3;</h3><p>&#x4E00;&#x822C;&#x6765;&#x8BF4;&#x6309;&#x7167;&#x4EE5;&#x4E0B;&#x6B65;&#x9AA4;&#x6267;&#x884C;&#x4F18;&#x5316;&#xFF0C;&#x5F53;&#x7136;&#x53EF;&#x4EE5;&#x505A;&#x7684;&#x66F4;&#x597D;&#xFF0C;&#x56E0;&#x4E3A;&#x8FD9;&#x91CC;&#x534A;&#x81EA;&#x52A8;&#x5316;&#x7684;&#x6B65;&#x9AA4;&#x5B9E;&#x5728;&#x6BD4;&#x8F83;&#x5570;&#x55E6;</p><ul><li><code>hexo n &quot;blogTitle&quot;</code> &#x65B0;&#x5EFA;&#x6587;&#x7AE0;&#x5E76;&#x5199;&#x5165;&#x5185;&#x5BB9;</li><li><code>hexo g</code> &#x751F;&#x6210;&#x9759;&#x6001;&#x6587;&#x4EF6;</li><li><code>gulp clean</code> &#x6E05;&#x7A7A;<code>dst</code>&#x76EE;&#x5F55;</li><li><code>gulp</code> &#x538B;&#x7F29;&#x9759;&#x6001;&#x6587;&#x4EF6;&#x5230;<code>dst</code>&#x76EE;&#x5F55;</li><li><code>gulp g</code>&#x7528;<code>dst</code>&#x76EE;&#x5F55;&#x4E2D;&#x7684;&#x6587;&#x4EF6;&#x8986;&#x76D6;<code>public</code>&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x540C;&#x540D;&#x6587;&#x4EF6;</li><li><code>hexo s</code> &#x542F;&#x52A8;&#x9884;&#x89C8;</li><li><code>hexo d</code> &#x90E8;&#x7F72;</li></ul><blockquote><p>&#x63D0;&#x793A;&#xFF1A;&#x90E8;&#x7F72;&#x5B8C;&#x6210;&#x540E;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x7F51;&#x9875;&#x7AEF;&#x67E5;&#x770B;&#x662F;&#x5426;&#x538B;&#x7F29;&#x4E86;&#x76F8;&#x5E94;&#x7684;&#x4EE3;&#x7801;&#x3002;</p></blockquote><h2 id="&#x603B;&#x7ED3;"><a href="#&#x603B;&#x7ED3;" class="headerlink" title="&#x603B;&#x7ED3;"></a>&#x603B;&#x7ED3;</h2><p>&#x672C;&#x6587;&#x8BB2;&#x8FF0;&#x4E86;&#x5982;&#x4F55;&#x4F7F;&#x7528;<strong>Gulp</strong>&#x6765;&#x4F18;&#x5316;<strong>Hexo</strong>&#x535A;&#x5BA2;&#xFF0C;&#x7531;&#x4E8E;&#x5BF9;<strong>Gulp</strong>&#x5373;&#x5B66;&#x5373;&#x7528;&#xFF0C;&#x534A;&#x81EA;&#x52A8;&#x5316;&#x7684;&#x6B65;&#x9AA4;&#x76F8;&#x5BF9;&#x8F83;&#x591A;&#xFF0C;&#x4EE5;&#x540E;&#x53EF;&#x4EE5;&#x8003;&#x8651;&#x5982;&#x4F55;&#x51CF;&#x5C0F;&#x6267;&#x884C;&#x6B65;&#x9AA4;&#x4ECE;&#x800C;&#x5B9E;&#x73B0;&#x5168;&#x81EA;&#x52A8;&#x5316;&#x3002;</p></div><div></div><div></div><footer class="post-footer"><div class="post-tags"> <a href="/tags/npm/" rel="tag">#npm</a> <a href="/tags/nodejs/" rel="tag">#nodejs</a> <a href="/tags/javascript/" rel="tag">#javascript</a> <a href="/tags/hexo/" rel="tag">#hexo</a> <a href="/tags/gulp/" rel="tag">#gulp</a> <a href="/tags/cnpm/" rel="tag">#cnpm</a> <a href="/tags/css/" rel="tag">#css</a> <a href="/tags/html/" rel="tag">#html</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/2016/06/17/Express在Mac中的安装和应用/" rel="next" title="Express在Mac中的安装和应用"><i class="fa fa-chevron-left"></i> Express在Mac中的安装和应用</a></div><div class="post-nav-prev post-nav-item"> <a href="/2016/06/21/HTTP协议解析（一）/" rel="prev" title="HTTP协议解析（一）">HTTP协议解析（一）<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"><script>with(document)0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion="+~(-new Date/36e5)]</script></div></div></div><div class="comments" id="comments"><div class="ds-thread" data-thread-key="2016/06/19/利用Gulp优化Hexo博客/" data-title="利用Gulp优化Hexo博客" data-url="http://yoursite.com/2016/06/19/利用Gulp优化Hexo博客/"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap"> 文章目录</li><li class="sidebar-nav-overview" data-target="site-overview"> 站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" src="/uploads/ziyi.jpg" alt="子奕"><p class="site-author-name" itemprop="name">子奕</p><p class="site-description motion-element" itemprop="description">postgraduate | front-end | nodejs</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"> <a href="/archives"><span class="site-state-item-count">4</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"> <a href="/categories"><span class="site-state-item-count">7</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"> <a href="/tags"><span class="site-state-item-count">24</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/ziyi2" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://weibo.com/u/5590627594" target="_blank" title="微博"><i class="fa fa-fw fa-weibo"></i> 微博</a></span><span class="links-of-author-item"><a href="https://www.zhihu.com/people/zi-yi-91-26" target="_blank" title="知乎"><i class="fa fa-fw fa-book"></i> 知乎</a></span><span class="links-of-author-item"><a href="http://tieba.baidu.com/home/main?un=_%D7%D3%DE%C8&fr=index" target="_blank" title="贴吧"><i class="fa fa-fw fa-chrome"></i> 贴吧</a></span></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#安装Gulp"><span class="nav-number">1.</span> <span class="nav-text">安装Gulp</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#全局安装"><span class="nav-number">1.1.</span> <span class="nav-text">全局安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作为项目的开发依赖安装"><span class="nav-number">1.2.</span> <span class="nav-text">作为项目的开发依赖安装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Gulp-API和插件"><span class="nav-number">2.</span> <span class="nav-text">Gulp API和插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#任务"><span class="nav-number">2.1.</span> <span class="nav-text">任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#来源"><span class="nav-number">2.2.</span> <span class="nav-text">来源</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#插件"><span class="nav-number">2.3.</span> <span class="nav-text">插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#安装插件"><span class="nav-number">2.3.1.</span> <span class="nav-text">安装插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#引入插件"><span class="nav-number">2.3.2.</span> <span class="nav-text">引入插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#使用插件示例"><span class="nav-number">2.3.3.</span> <span class="nav-text">使用插件示例</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#目标"><span class="nav-number">2.4.</span> <span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#监视"><span class="nav-number">2.5.</span> <span class="nav-text">监视</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#小结"><span class="nav-number">2.6.</span> <span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#优化Hexo博客"><span class="nav-number">3.</span> <span class="nav-text">优化Hexo博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#作为项目的开发依赖安装-1"><span class="nav-number">3.1.</span> <span class="nav-text">作为项目的开发依赖安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装插件-1"><span class="nav-number">3.2.</span> <span class="nav-text">安装插件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#优化Hexo"><span class="nav-number">3.3.</span> <span class="nav-text">优化Hexo</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#创建任务"><span class="nav-number">3.3.1.</span> <span class="nav-text">创建任务</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#优化步骤"><span class="nav-number">3.3.2.</span> <span class="nav-text">优化步骤</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#任务详解"><span class="nav-number">3.4.</span> <span class="nav-text">任务详解</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#清理任务"><span class="nav-number">3.4.1.</span> <span class="nav-text">清理任务</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#默认任务"><span class="nav-number">3.4.2.</span> <span class="nav-text">默认任务</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#压缩html"><span class="nav-number">3.4.2.1.</span> <span class="nav-text">压缩html</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#压缩css"><span class="nav-number">3.4.2.2.</span> <span class="nav-text">压缩css</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#压缩js"><span class="nav-number">3.4.2.3.</span> <span class="nav-text">压缩js</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#压缩image"><span class="nav-number">3.4.2.4.</span> <span class="nav-text">压缩image</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#替换任务"><span class="nav-number">3.4.3.</span> <span class="nav-text">替换任务</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#小结-1"><span class="nav-number">3.5.</span> <span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#总结"><span class="nav-number">4.</span> <span class="nav-text">总结</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright"> &copy; 2016.06.16<span itemprop="copyrightYear"></span> <span class="with-love">|</span> <span class="author" itemprop="copyrightHolder">子奕</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/affix.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script><script type="text/javascript">var duoshuoQuery={short_name:"ziyi2"};!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.id="duoshuo-script",t.src=("https:"==document.location.protocol?"https:":"http:")+"//static.duoshuo.com/embed.js",t.charset="UTF-8",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(t)}()</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),s=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);s.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!0,s=r.title.trim().toLowerCase(),n=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=r.url,i=-1,l=-1,p=-1;if(""!=s&&""!=n&&a.forEach(function(e,t){i=s.indexOf(e),l=n.indexOf(e),0>i&&0>l?c=!1:(0>l&&(l=0),0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+s+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;0>u&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),s.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").mousedown(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script></body></html>